<template>
  <el-dialog
    :visible.sync="show"
    width="500px"
    :title="id?'修改课程':'添加课程'"
    :close-on-click-modal="false"
  >
    <el-row :gutter="24" class="center_y ma_1">
      <el-col :span="12" class="center_x">
        <span>实验名称</span>
      </el-col>
      <el-col :span="12" class="center_x aic">
        <el-input placeholder="请输入实验名称" v-model="experimentName"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="center_y ma_1">
      <el-col :span="12" class="center_x center_y">
        <span>实验课程</span>
      </el-col>
      <el-col :span="12" class="center_x">
        <el-select v-model="courseName">
          <el-option label="电商小件商品快速拣货决策虚拟仿真实验" value="电商小件商品快速拣货决策虚拟仿真实验"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="center_y ma_1">
      <el-col :span="12" class="center_x">
        <span>开始时间</span>
      </el-col>
      <el-col :span="12" class="center_x">
        <el-date-picker
          format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="请选择开始时间"
          v-model="experimentStartTime"
        ></el-date-picker>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="center_y ma_1">
      <el-col :span="12" class="center_x">
        <span>截止时间</span>
      </el-col>
      <el-col :span="12" class="center_x">
        <el-date-picker
          format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="请输入实验名称"
          v-model="experimentEndTime"
        ></el-date-picker>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="center_y ma_1">
      <el-col :span="8" class="center_x">
        <span>实验编码</span>
      </el-col>
      <el-col :span="8" class="center_x">
        <el-input placeholder="请获取实验编码" v-model="experimentCode" :disabled="coudModify()"></el-input>
      </el-col>
      <el-col :span="8" class="center_x">
        <el-button type="info" @click="getExpCode" :disabled="coudModify()">获取实验编码</el-button>
      </el-col>
    </el-row>
    <template slot="footer">
      <el-row class="frx ma_1" :gutter="24">
        <el-button type="primary" class="mr_5" :disabled="!testAdd()" @click="save()">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import CApi from "../../api/Course.js";
export default {
  props: {
    id: Number,
    visible: Boolean
  },
  data() {
    return {
      show: false,
      experimentName: "",
      courseName: "",
      experimentStartTime: "",
      experimentEndTime: "",
      experimentCode: ""
    };
  },
  watch: {
    visible: function(val) {
      this.show = val;
    },
    show: function(val) {
      this.$emit("update:visible", val);
    },
    id:function(){
      this.loadbyId();
    }
  },
  methods: {
    loadbyId() {
      this.axios.get(CApi.findById,{params:{id:this.id}}).then(res=>{
        if(res.data.status===0){
          this.experimentName = res.data.data.experimentName;
          this.courseName = res.data.data.courseName;
          this.experimentStartTime = res.data.data.experimentStartTime;
          this.experimentCode = res.data.data.experimentCode;
          this.experimentEndTime = res.data.data.experimentEndTime;
        }
      })
    },
    getExpCode() {
      this.axios.get(CApi.courseCode).then(res => {
        if (res.data.status === 0) {
          this.experimentCode = res.data.data;
        }
      });
    },
    save() {
      if (this.id) {
        this.update();
      } else {
        this.add();
      }
    },
    getPayload() {
      return {
        id: this.id,
        username: this.$store.state.user.username,
        experimentName: this.experimentName,
        courseName: this.courseName,
        experimentStartTime: new Date(this.experimentStartTime).toJSON(),
        experimentEndTime: new Date(this.experimentEndTime).toJSON()
      };
    },
    update() {
      this.show = false;
      this.axios.put(CApi.update, this.getPayload()).then(res => {
        if (res.data.status === 0) {
          this.$parent.load();
        }
      });
    },
    add() {
      this.show = false;
      this.axios.post(CApi.add, this.getPayload()).then(res => {
        if (res.data.status === 0) {
          this.$parent.load();
        }
      });
    },
    testAdd() {
      return (
        this.experimentName != "" &&
        this.experimentStartTime != "" &&
        this.experimentEndTime != "" &&
        this.experimentCode != "" &&
        this.courseName != ""
      );
    },
    coudModify(){
      if(this.id){
        return true;
      }
    }
  },
  mounted(){
    if(this.id){
      this.loadbyId();
    }
  }
};
</script>

<style>
</style>
